<template>
  <div id="userTeamLeadPage">
    <team-card-for-join-or-lead-list @popUpFlag="popUpFlag" @pop-teamId="popTeamId" :team-list="teamList" />
  <van-empty id="empty" v-if="teamList?.length < 1" description="你没有领导任何队伍"/>
</div>
  <!-- 顶部弹出队伍成员 -->
  <van-popup
      v-model:show="showPopUpFlag"
      @open="viewTeamUser(viewTeamId)"
      position="top"
      round
      closeable
      close-icon="clear"
      close-on-click-overlay
      destroy-on-close="true"
      id="closeMemberList"
  >
    <user-card-list @popUp="popUp" @pop-user="popUser" :userList="viewTeamUserList"/>
  </van-popup>

  <!-- 底部弹出-"了解我" -->
  <van-popup
      v-model:show="showPopUpIndex"
      @open="listUserTeam(showUser.id)"
      position="bottom"
      closeable
      close-icon="clear"
      @close="activeNamesToNull"
      round
      destroy-on-close="true"
  >
    <van-card
        :tag="showUser.gender === 0 ? '男' : '女'"
        :title="`Ta的昵称: ${showUser.username} `"
        :thumb="showUser.avatarUrl"
        id="userCard"
    >
      <template #tags>
        <van-tag round type="primary" size="medium" v-for="tag in showUser.tags" style="margin-right: 8px; margin-top: 8px">
          {{tag}}
        </van-tag>
      </template>
    </van-card>
    <van-collapse v-model="activeNames" accordion v-if="showPopUpIndex">
      <van-collapse-item name="1">
        <template #title>
          <div><van-icon name="description-o" /> 个性签名：</div>
        </template>
        <van-highlight :keywords="showUser.profile" :source-string="showUser.profile" id="userPopShow"/>
        <van-highlight v-if="!showUser.profile" :keywords="'这个人很懒，还没有介绍自己'" :source-string="'这个人很懒，还没有介绍自己'" id="userPopShow"/>
      </van-collapse-item>
      <van-collapse-item name="2">
        <template #title>
          <div><van-icon name="phone-o" /> 联系方式：</div>
        </template>
        <van-highlight :keywords="showUser.phone" :source-string="showUser.phone" id="userPopShow"/>
        <van-highlight v-if="!showUser.phone" :keywords="'Ta未提供联系方式'" :source-string="'Ta未提供联系方式'" id="userPopShow"/>
      </van-collapse-item>
      <van-collapse-item name="3">
        <template #title>
          <div><van-icon name="envelop-o" /> 邮箱：</div>
        </template>
        <van-highlight :keywords="showUser.email" :source-string="showUser.email" id="userPopShow"/>
        <van-highlight v-if="!showUser.email" :keywords="'Ta未展示自己的邮箱'" :source-string="'Ta未展示自己的邮箱'" id="userPopShow"/>
      </van-collapse-item>
      <van-collapse-item name="4">
        <template #title>
          <div><van-icon name="contact-o" /> 星球编号：</div>
        </template>
        <van-highlight :keywords="showUser.planetCode" :source-string="showUser.planetCode ?? 'Ta还没有星球编号'" id="userPopShow"/>
        <van-highlight v-if="!showUser.planetCode" :keywords="'Ta还没有星球编号'" :source-string="'Ta还没有星球编号'" id="userPopShow"/>
      </van-collapse-item>
      <van-collapse-item name="5">
        <template #title>
          <div><van-icon name="flag-o" /> Ta 加入的队伍：</div>
        </template>
        <team-card-fro-view-members-list :team-list="userJoinTeamList" />
        <van-highlight v-if="userJoinTeamList.length < 1" :keywords="'Ta 还没有加入队伍'" :source-string="'Ta 还没有加入队伍'" id="userPopShow" />
      </van-collapse-item>
    </van-collapse>
  </van-popup>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import UserCardList from "../components/UserCardList.vue";
import {showFailToast} from "vant";
import TeamCardFroViewMembersList from "../components/TeamCardFroViewMembersList.vue";
import TeamCardForJoinOrLeadList from "../components/TeamCardForJoinOrLeadList.vue";

const teamList = ref([]);

// "查看成员"按钮-弹窗传值
const showPopUpFlag = ref<boolean>(false);
const viewTeamId = ref();
const popUpFlag=(data:any) => {
  showPopUpFlag.value = data;
}
const popTeamId = (dataTwo:any) => {
  viewTeamId.value = dataTwo;
}
// 查看成员列表
const viewTeamUserList = ref([]);

// "了解我"按钮-弹窗传值
const showPopUpIndex = ref();
const showUser = ref();
const popUp=(indexDataOne: any)=>{
  showPopUpIndex.value = indexDataOne;
}
const popUser = (indexDataTwo: any) => {
  showUser.value = indexDataTwo;
  if(showUser.value.profile === null) {
    showUser.value.profile = '';
  }
  if(showUser.value.phone === null) {
    showUser.value.phone = '';
  }
  if(showUser.value.email === null) {
    showUser.value.email = '';
  }
}

// 用户加入的队伍列表
const userJoinTeamList = ref();
const activeNames = ref<string>();

/**
 * 搜索队伍
 * @param val
 * @returns {Promise<void>}
 */
const listTeam = async (val = '') => {
  const res = await myAxios.get('/team/list/my/lead', {
    params: {
      searchKeyText: val,
      pageNum: 1,
    }
  });
  // @ts-ignore
  if (res?.code === 0 && res.data){
    teamList.value = res.data;
  } else {}
};

/**
 * 展示队伍成员
 * @param viewTeamId
 */
const viewTeamUser = async (viewTeamId: number) => {
  let userListData;
  userListData = await myAxios.get('/user/team/members', {
    params: {
      viewTeamId: viewTeamId,
    },
  })
      .then(function (response) {
        console.log('/user/match succeed',response);
        return response?.data;
      })
      .catch(function (error) {
        console.log('/user/match error',error);
        showFailToast('展示队伍成员伙伴失败');
      });
  // @ts-ignore
  if (userListData){
    userListData.forEach(user => {
      if (user.tags){
        user.tags = JSON.parse(user.tags);
      }
    })
    viewTeamUserList.value = userListData;
  }
}

// 页面加载时触发一次 加载队伍数据
onMounted(() => {
  listTeam();
});

/**
 * 搜索用户加入的队伍
 * @returns {Promise<void>}
 */
const listUserTeam = async (userId: number) => {
  const res = await myAxios.get('/team/list/user/join', {
    params: {
      userId: userId,
      pageNum: 1,
    },
  });
  // @ts-ignore
  if (res?.code === 0 && res.data){
    userJoinTeamList.value = res.data;
  } else {
    showFailToast('我加入的队伍展示失败，请刷新重试');
  }
}

const activeNamesToNull = () => {
  activeNames.value = '';
}
</script>


<style scoped>
#empty {
  --van-empty-description-font-size: 21px;
  --van-empty-description-padding: 10px;
}
#userPopShow {
  font-size: 15px;
  --van-highlight-tag-color: #1a1a1a;
}
</style>